<template>
  <div id="jsHacker-container">
    <canvas ref="canvas" id="c">

    </canvas>
  </div>
</template>

<script>
export default {
  //组件名称
  name: "JsHacker",
  props: [],
  //组件注册
  components: {
    width: "",
    height: "",
  },
  //数据驱动
  data() {
    return {}
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    jsHacker: function () {
      let c = document.getElementById("c");
      c.height = this.height;
      c.width = this.width;
      let ctx = c.getContext("2d");

      //字体大小
      let font_size = 14;
      //显示字符
      let chinese = "a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9";
      chinese = chinese.split("");
      //计算列数
      let columns = Math.floor(this.width / font_size);

      // y坐标
      let drops = [];  //文字的y坐标
      for (let i = 0; i < columns; i++) {  //文字起始位置
        drops[i]=c.height;
      }


      //循环绘画
      setInterval(() => {
        //填充
        ctx.fillStyle = "rgba(0,0,0,0.05)";     //填充颜色
        ctx.fillRect(0, 0, c.width, c.height);  //填充 从坐标 (0,0)到坐标 (width,height) 填充
        ctx.font = font_size + "px arial";      //文字大小和字体 ctx.font = "12px arial"
        ctx.fillStyle = "#0F0";                 //填充文字颜色

        for (let i = 0; i < columns; i++) {     //遍历每一列
          let text = chinese[Math.floor(Math.random() * chinese.length)] //随机文字
          let x = i * font_size;
          let y = drops[i] * font_size;

          ctx.fillText(text, x, y);  //填写文字  fillText（文本内容,文本开始x的坐标,文本开始y坐标）

          if (Math.random() > 0.99) {  //改变起点位置
            drops[i] = 0;
          }
          drops[i]++;
        }

      }, 38)
    },
    //设置 canvas 宽高
    load() {
      this.width = document.body.scrollWidth; //获取网页正文全文宽
      this.height = document.body.scrollHeight; //获取网页正文全文高
      let c = this.$refs.canvas;
      c.style.width = `${this.width}` + 'px';
      c.style.height = `${this.height - 70 - 5}` + 'px'; //减去 header 高度
    }
  },
  //钩子函数
  mounted() {
    this.load();
    this.jsHacker()
  }
}
</script>

<style lang="less" scoped>
#jsHacker-container {

}
</style>